<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<title>EditableGrid - Minimal demo - Attaching grid to an HTML table</title>
		
		<script src="../../editablegrid.js"></script>
		<!-- [DO NOT DEPLOY] --> <script src="../../editablegrid_renderers.js" ></script>
		<!-- [DO NOT DEPLOY] --> <script src="../../editablegrid_editors.js" ></script>
		<!-- [DO NOT DEPLOY] --> <script src="../../editablegrid_validators.js" ></script>
		<!-- [DO NOT DEPLOY] --> <script src="../../editablegrid_utils.js" ></script>
		<!-- [DO NOT DEPLOY] --> <script src="../../editablegrid_charts.js" ></script>
		<link rel="stylesheet" href="../../editablegrid.css" type="text/css" media="screen">
		
		<style>
			body { font-family:'lucida grande', tahoma, verdana, arial, sans-serif; font-size:11px; }
			h1 { font-size: 15px; }
			a { color: #548dc4; text-decoration: none; }
			a:hover { text-decoration: underline; }
			table.testgrid { border-collapse: collapse; border: 1px solid #CCB; width: 800px; }
			table.testgrid td, table.testgrid th { padding: 5px; border: 1px solid #E0E0E0; }
			table.testgrid th { background: #E5E5E5; text-align: left; }
			input.invalid { background: red; color: #FDFDFD; }
		</style>
		
		<script>
			window.onload = function() {
				editableGrid = new EditableGrid("DemoGridAttach"); 

				// we build and load the metadata in Javascript
				editableGrid.load({ metadata: [
					{ name: "name", datatype: "string", editable: true },
					{ name: "firstname", datatype: "string", editable: true },
					{ name: "age", datatype: "integer", editable: true },
					{ name: "height", datatype: "double(m,2)", editable: true },
					{ name: "country", datatype: "string", editable: true, values: 
					  	{ 'Europe': { "be" : "Belgium", "fr" : "France", "uk" : "Great-Britain", "nl": "Nederland"},
						  'America': { "br" : "Brazil", "ca": "Canada", "us" : "USA" },
						  'Africa': { "ng" : "Nigeria", "za": "South-Africa", "zw" : "Zimbabwe" }
					  	}
					},
					{ name: "email", datatype: "email", editable: true },
					{ name: "freelance", datatype: "html", editable: false },
					{ name: "lastvisit", datatype: "date", editable: true }
				]});
				
				
				// then we attach to the HTML table and render it
				editableGrid.attachToHTMLTable('htmlgrid');
				.renderGrid();
			} 
		</script>
		
	</head>
	
	<body>
		<h1>EditableGrid - Minimal Demo - Attaching grid to an HTML table - <a href="../index.html">Back to menu</a></h1>
		<table id="htmlgrid" class="testgrid">
			<tr>
				<th>NAME</th>
				<th>FIRSTNAME</th>
				<th>AGE</th>
				<th>HEIGHT</th>
				<th>COUNTRY</th>
				<th>EMAIL</th>
				<th><input type="checkbox" name="chkall" value="0" /></th>
				<th>LAST VISIT</th>
			</tr>
			<tr id="R1">
				<td>Duke</td>
				<td>Patience</td>
				<td>33</td>
				<td>1.842</td>
				<td>uk</td>
				<td>patience.duke@gmail.com</td>
				<td><input type="checkbox" name="chk[]" value="0" /></td>
				<td>11/12/2002</td>
			</tr>
			<tr id="R2">
				<td>Rogers</td>
				<td>Denise</td>
				<td>59</td>
				<td>1.627</td>
				<td>us</td>
				<td>rogers.d@gmail.com</td>
				<td><input type="checkbox" name="chk[]" value="0" />&nbsp;</td>
				<td>07/05/2003</td>
			</tr>
			<tr id="R3">
				<td>Dujardin</td>
				<td>Antoine</td>
				<td>21</td>
				<td>1.73</td>
				<td>fr</td>
				<td>felix.compton@yahoo.fr</td>
				<td><input type="checkbox" name="chk[]" value="0" /></td>
				<td>21/02/1999</td>
			</tr>
			<tr id="R4">
				<td>Conway</td>
				<td>Coby</td>
				<td>47</td>
				<td>1.96</td>
				<td>za</td>
				<td>coby@conwayinc.com</td>
				<td><input type="checkbox" name="chk[]" value="0" /></td>
				<td>01/12/2007</td>
			</tr>
			<tr id="R5">
				<td>Shannon</td>
				<td>Rana</td>
				<td>24</td>
				<td>1.56</td>
				<td>nl</td>
				<td>ranna.shannon@hotmail.com</td>
				<td><input type="checkbox" name="chk[]" value="0" /></td>
				<td>07/10/2009</td>
			</tr>
			<tr id="R6">
				<td>Benton</td>
				<td>Jasmine</td>
				<td>61</td>
				<td>1.71</td>
				<td>ca</td>
				<td>jasmine.benton@yahoo.com</td>
				<td><input type="checkbox" name="chk[]" value="0" /></td>
				<td>13/01/2009</td>
			</tr>
			<tr id="R7">
				<td>Belletoise</td>
				<td>André</td>
				<td>31</td>
				<td>1.84</td>
				<td>be</td>
				<td>belletoise@kiloutou.be</td>
				<td><input type="checkbox" name="chk[]" value="0" /></td>
				<td></td>
			</tr>
			<tr id="R8">
				<td>Santa-Maria</td>
				<td>Martin</td>
				<td>37</td>
				<td>1.80</td>
				<td>br</td>
				<td>martin.sm@gmail.com</td>
				<td><input type="checkbox" name="chk[]" value="0" /></td>
				<td>12/06/1995</td>
			</tr>
			<tr id="R9">
				<td>Dieumerci</td>
				<td>Amédé</td>
				<td>37</td>
				<td>1.81</td>
				<td>ng</td>
				<td>dieumerci@gmail.com</td>
				<td><input type="checkbox" name="chk[]" value="0" /></td>
				<td>05/07/2009</td>
			</tr>
			<tr id="R10">
				<td>Morin</td>
				<td>Wanthus</td>
				<td>46</td>
				<td>1.77</td>
				<td>zw</td>
				<td>morin.x@yahoo.html.com</td>
				<td><input type="checkbox" name="chk[]" value="0" /></td>
				<td>4/3/2004</td>
			</tr>
		</table>
	</body>
	
</html>
